<template>
  <main class="c-arrange">
    <div class="title">
      病组超支占比Top5
    </div>
    <div class="list">
      <div class="item" v-for="(item,index) in arrangeData" :key="index">
        <div class="left">
          <div class="num">{{index+1}}</div>
          <div class="name" :title="item['disease_name']">{{item['disease_name']}}</div>
        </div>
        <div class="value">{{item['proportion']}}<span>元</span></div>
      </div>
    </div>
  </main>
</template>

<script lang="js">
export default {
  props:{
    arrangeData:{
      type:Array,
      default:()=>[]
    }
  }
}
</script>

<style scoped lang="stylus">
.c-arrange {
  flex-grow 1
  .title {
    text-align center
    font-weight bold
    font-size: 12px;
    color: #484D78;
    line-height: 12px;
  }
  .item{
    margin-top 7px
    height 30px
    background rgba(84,103,230,0.40)
    border-radius 8px
    padding 8px 10px
    display flex
    align-items center
    justify-content space-between
    .left{
      display flex
      align-items center
      .num{
        display flex
        align-items center
        justify-content center
        height 16px
        width @height
        background #FFFFFF
        border-radius 100%
        font-size: 11px;
        color: #484D78;
        font-weight bold
      }
      .name{
        margin-left 20px
        font-size: 12px;
        color: #484D78;
        line-height: 12px;
        max-width 185px
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
      }
    }
    .value{
      font-size: 14px;
      color: #4B82FB;
      line-height: 14px;
      span{
        color: #484D78;
      }
    }
  }
}
</style>
